<template>
  <view class="my_wrap">
		<view class="user_info">
			<view class="user_avatar_wrap">
				<image
					src="https://pic1.zhimg.com/v2-fda399250493e674f2152c581490d6eb_1200x500.jpg"
					mode="widthFix"
					lazy-load="false"
				>
				</image>
			</view>
			<text class="user_info-name">{{ info.username }}</text>
		</view>
		<view class="divider">
			<view class="divider_des">
				<text>升级VIP</text>
			</view>
		</view>
    <uni-list>
      <navigator
        :key="index"
        :url="item.url"
        hover-class="none"
        open-type="navigate"
        v-for="(item, index) in menuList"
      >
        <uni-list-item :show-arrow="item.showArrow" :title="item.title"/>
      </navigator>
    </uni-list>
		<button @tap="handleLogout" class="uni-common-mt" style="width: 95%" type="primary">退出账号</button>
  </view>
</template>

<script>
import { getUserInfo, logout } from 'mock/login'
import { uniList, uniListItem } from '@dcloudio/uni-ui'

export default {
  components: {
    uniList,
    uniListItem
  },
  data() {
    return {
      info: {},
      menuList: [
        {
          title: '个人信息',
					url: '',
					showArrow: false
        },
        {
          title: '关于我们',
					url: '',
					showArrow: false
				},
				{
          title: '设置',
					url: '',
					showArrow: true
				}
      ]
    }
	},
	onLoad() {
		this.getUserInfo()
	},
  methods: {
    getUserInfo() {
      uni.showLoading({
        title: '正在加载',
        mask: true
      })
      getUserInfo().then(res => {
				this.info = res.data
        uni.hideLoading()
      })
    },
    handleLogout() {
      uni.showModal({
        title: '提示',
        content: '确定要退出登录吗？',
        success(res) {
          if (res.confirm) {
            uni.showLoading({
              title: '正在退出',
              mask: true
						})
						logout().then(res => {
							setTimeout(() => {
	              uni.hideLoading()
								uni.reLaunch({
									url: `/pages/login/index`
								})
							}, 1000)
						})
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.my_wrap {
	padding-top: 50upx;
	.user_info {
		display: flex;
		padding-bottom: 20upx;
		&-name {
			display: flex;
			margin-left: 20upx;
    	align-items: flex-end;
		}
		.user_avatar_wrap {
			width: 100upx;
			height: 100upx;
			margin-left: 40upx;
			border-radius: 50%;
			overflow: hidden;
			border: 1px solid $uni-border-color;
			image {
				width: 100%;
			}
		}
	}
	.divider {
		display: block;
    height: 2upx;
    width: 100%;
		margin: 45upx 0;
		background-color: $uni-border-color;
		&_des {
			position: absolute;
			left: 50%;
	    transform: translateX(-50%) translateY(-50%);
			background-color: $uni-bg-color;
			padding: 0 20px;
			font-weight: 500;
			font-size: 14px;
		}
	}
}
</style>
